<template>
  <view class="dy-scroll-container">
    <dy-navbar title="倒计时" />
    <scroll-view class="dy-scroll" scroll-y="">
      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          基础用法
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-down value="314159" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          停止倒计时
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-count-down value="314159" :autoplay="false" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          不同精度
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view>
              不显示天：
              <dy-count-down value="314159" :show-day="false" />
            </view>
            <view class="dy-mg-tb-24">
              不显示小时：
              <dy-count-down value="314159" :show-day="false" :show-hour="false" />
            </view>
            <view>
              不显示分钟：
              <dy-count-down
                value="314159"
                :show-day="false"
                :show-hour="false"
                :show-minute="false"
              />
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          分隔符
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view>
              分隔符(colon-冒号)：
              <dy-count-down value="314159" separator="colon" />
            </view>
            <view class="dy-mg-tb-24">
              分隔符(zh-中文)：
              <dy-count-down value="314159" separator="zh" />
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24">
          自定义样式
        </dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view>
              时间项：
              <dy-count-down
                value="314159"
                :time-style="{
                  color: '#CA332C',
                  background: '#FFE7E8',
                  border: '1px solid #CA332C'
                }"
                :separator-style="{
                  color: '#CA332C'
                }"
              />
            </view>
            <view class="dy-mg-tb-24">
              分隔符：
              <dy-count-down
                value="314159"
                separator="zh"
                :separator-style="{
                  color: '#CA332C'
                }"
              />
            </view>
          </view>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CountDown'
}
</script>
